///<reference path="../../../../../../node_modules/@angular/core/src/metadata/lifecycle_hooks.d.ts"/>
import {
  AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges,
  ViewChild
} from '@angular/core';


import { GetRTDataByKKSCodesService } from '../../../services/get-rtdata-by-kkscodes.service'

@Component({
  selector: 'app-chart-power-composition',
  templateUrl: './chart-power-composition.component.html',
  styleUrls: ['./chart-power-composition.component.css']
})
export class ChartPowerCompositionComponent implements OnInit, AfterViewInit, OnDestroy ,OnChanges {
  ngOnChanges(changes: SimpleChanges): void {
    // console.log(changes['totalKks']);
    if(changes['totalKks'])
      this.initChart();
  }
  _name:string = '';

  @Input() set name(name:string) {
    this._name=(name&&name.trim())||'';
  }

  public chartOptions

  constructor(
    private getKksRes:GetRTDataByKKSCodesService
  ) { }

  public data:object[];
  public componentName:string="standardPowerUtilizationRate";

  @Input() totalKks:string;
  @Input() time:string;

  ngOnInit() {
    // this.initChart();
    this.data=[
      { name: '性能损失率', data: [{y:2,color:'#cccccc'}]},
      { name: '自身限负荷损失率', data: [{y:1,color:'#02DCBF'}]},
      { name: '调度停机损失率', data: [{y:1,color:'#A09FA2'}]},
      { name: '检修停机损失率', data: [{y:1,color:'#B400A0'}]},
      { name: '故障停机损失率', data: [{y:1,color:'#ff0000'}]},
      { name: '调度限负荷损失率', data: [{y:1,color:'#E6E900'}]},
      { name: '标准能量利用率', data: [{y:1,color:'#4cae4c'}]}
    ]
  }

  // @ViewChild('chart') public chartEl: ElementRef;  //highcharts

  private _chart: any; //highcharts

  //highcharts
  public initChart(){
    // console.log('initChart')
    if(this.totalKks && this.time) {
      this.getKksRes.getRestKksByComponent(this.componentName, this.time).subscribe(
        res => {
          let resKksString = res;
          // console.log(resKksString);
          let kksString=resKksString.map(str=>{
            return this.totalKks+str;
          })
          this.getKksRes.getKKsDataSnap(kksString).subscribe(
            res=>{
              let data=[]
              kksString.forEach(item=>{
                res.RTDataSets.forEach(it=>{
                  if(item===it.kksCode){
                    data.push(it.RTDataValues[0].Value)
                  }
                })
              })
              if(data.length===this.data.length){
                 this.data.forEach((item,index)=>{
                   item['data'][0]['y']=data[index];
                 })
              }
              this.fillChart(this.data);
            }
          )
        }
      )
    }
  }

  public fillChart(data:any[]){

    let opts: any = {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'column',
        backgroundColor: 'transparent',
        renderTo: ''
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      title: {
        text: '标准能量利用比',
        style:{"font-size":"13px"}
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b><br/>',
        shared:true
      },
      plotOptions: {
        column: {
          stacking: 'percent',
        }
      },
      xAxis: {
        title: {
          text: ''
        },
        categories:[''],
        labels: {
          enabled: false
        },
        tickWidth: 0
      },
      yAxis: {
        title: {
          text: ''
        },
        labels: {
          format: '{value}%'
        },
        gridLineWidth: 0,
        lineWidth: 1,
        tickWidth: 1,
      },
      series: data
    }
    this.chartOptions = opts

    // this.updateChart(this.chartEl,opts);
  }

  public ngAfterViewInit() {

  }

/*  public updateChart(chartEl:any,opts:any){
    if (chartEl && chartEl.nativeElement) {
      opts.chart.renderTo = chartEl.nativeElement
      this._chart = new Highcharts.Chart(opts);
    }
  }*/

  public ngOnDestroy() {
    if(this._chart)
     this._chart.destroy();
  }


}
